<template>
  <div class="thequery">
    <crumbs :BreadCrumb="BreadCrumb"></crumbs>
    <div class="boxs">
      <div class="titles">酒店查询-预定酒店</div>
      <el-form
        ref="formInline"
        :rules="rules"
        :model="formInline"
        label-width="80px"
        class="elform"
      >
        <el-form-item label="目的地" style="width: 90%" prop="provinceName">
          <!-- <el-autocomplete
            style="width: 100%"
            v-model="formInline.provinceName"
            :fetch-suggestions="querySearch"
            placeholder="请选择"
            @select="cityChange"
            @keyup.enter.native="accountLogin('provinceName')"
          ></el-autocomplete>

          <el-popover placement="bottom"     style="width: 100%" trigger="click" >
            <div class="citname" v-if="formInline.provinceName==''">
              <div v-for="(item,index) in restaurantsList" :key="index" @click="cityNames(item)">
              <span>{{item.cityName}}</span>
            </div>
            </div>
            <div class="citname" v-if="formInline.provinceName!=''">
              <div v-for="(item,index) in ctyNameList" :key="index" @click="cityNamesaa(item)">
              <span>{{item.composedName}}</span>
            </div>
            </div>
            <el-input slot="reference" v-model="formInline.provinceName" @input="changeinput" placeholder="目的地"></el-input>
          </el-popover> -->
          <el-select
            :filter-method="changeinput"
            clearable
            v-model="formInline.provinceName"
            filterable
            placeholder="请选择"
          >
            <el-option
              v-for="item in ctyNameList"
              :key="item.cityId"
              :label="
                item.provinceName +
                '-' +
                item.cityName 
               
              "
              :value="item.cityId"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <div class="times">
          <el-form-item label="入住日期" prop="arrivalDate">
            <el-col>
              <el-date-picker
                :picker-options="pickerBeginDateBefore"
                v-model="formInline.arrivalDate"
                :disabled="type == 'change'"
                value-format="yyyy-MM-dd"
                type="date"
                placeholder="入住日期"
                ref="provinceName"
                @keyup.enter.native="accountLogin('arrivalDate')"
              >
              </el-date-picker>
            </el-col>
          </el-form-item>
          <el-form-item label="退房日期" prop="departureDate">
            <el-col>
              <el-date-picker
                :picker-options="pickerBeginDateBefore"
                v-model="formInline.departureDate"
                value-format="yyyy-MM-dd"
                type="date"
                placeholder="退房日期"
                ref="arrivalDate"
                @keyup.enter.native="onSubmit('form')"
              >
              </el-date-picker>
            </el-col>
          </el-form-item>
        </div>
        <div class="times">
          <el-form-item label="房间数">
            <el-select
              v-model="formInline.roomNum"
              placeholder="一间"
              @change="roomNumChange"
              clearable
            >
              <el-option
                v-for="item in timeNum"
                :key="item.id"
                :label="item.type"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="住客数">
            <el-select
              v-model="formInline.Num"
              placeholder="1"
              @change="NumChange"
              clearable
            >
              <el-option
                v-for="item in numList"
                :key="item.num"
                :label="item.num"
                :value="item.num"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </div>
        <div class="times">
          <el-form-item label="星级">
            <el-select
              v-model="formInline.star"
              placeholder="不限"
              clearable
              multiple
            >
              <el-option
                v-for="item in starList"
                :key="item.id"
                :label="item.starsName"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="关键词">
            <el-input
              v-model="formInline.name"
              placeholder="(选填关键词)酒店名/商圈/地标"
            ></el-input>
            <!-- <el-select v-model="formInline.name" placeholder="不限" clearable   filterable @blur="changeKeyList">
              <el-option v-for="item in keyList" :key="item.id" :label="item.starsName" :value="item.id">
              </el-option>
            </el-select> -->
          </el-form-item>
        </div>
        <el-form-item>
          <el-button @click="createSearch()">新建标签页搜索</el-button>
          <el-button type="primary" @click="Outsidemining"
            >创建外采订单</el-button
          >
          <el-button type="primary" @click="onSubmit('formInline')"
            >搜索</el-button
          >
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script>
import crumbs from "../../components/Crumbs.vue";
import Format from "../../common//format.js";
import bus from "../../common/bus";
export default {
  name: "thequery",
  components: {
    crumbs,
    Format,
  },
  data() {
    return {
      ctyNameList: [],
      pickerBeginDateBefore: {
        disabledDate(time) {
          return time.getTime() < Date.now() - 8.64e7;
        },
        shortcuts: [
          {
            text: "今天",
            onClick(picker) {
              picker.$emit("pick", new Date());
            },
          },
          {
            text: "明天",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() + 3600 * 1000 * 24);
              picker.$emit("pick", date);
            },
          },
          {
            text: "后天",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() + 3600 * 1000 * 24 * 2);
              picker.$emit("pick", date);
            },
          },
        ],
      },
      BreadCrumb: [
        {
          path: "/reservation/thequery",
          name: "酒店查询",
        },
      ],
      starList: [
        {
          starsName: "五星级",
          id: 0,
        },
        {
          starsName: "豪华",
          id: 1,
        },
        {
          starsName: "四星级",
          id: 2,
        },
        {
          starsName: "高档",
          id: 3,
        },
        {
          starsName: "三星级",
          id: 4,
        },
        {
          starsName: "舒适型",
          id: 5,
        },
        {
          starsName: "经济型",
          id: 6,
        },
        {
          starsName: "低档",
          id: 7,
        },
      ],
      numList: [
        {
          num: "1",
          is: false,
        },
        {
          num: "2",
          is: false,
        },
        {
          num: "3",
          is: false,
        },
        {
          num: "4",
          is: false,
        },
        {
          num: "5",
          is: false,
        },
      ],
      name: "",
      Num: "",
      // 关键词数组
      keyList: [],
      formInline: {
        roomNum: 1,
        Num: 1,
        name: "",
        provinceName: "",
        arrivalDate: "",
        departureDate: "",
        star: [],
      },
      rules: {
        provinceName: [
          {
            required: true,
            message: "请选择目的地",
            trigger: "change",
          },
        ],
        arrivalDate: [
          {
            required: true,
            message: "请选择入住时间",
            trigger: "change",
          },
        ],
        departureDate: [
          {
            required: true,
            message: "请选择退房时间",
            trigger: "change",
          },
        ],
      },
      timeNum: [
        {
          id: 1,
          type: "一间",
          is: false,
        },
        {
          id: 2,
          type: "二间",
          is: false,
        },
        {
          id: 3,
          type: "三间",
          is: false,
        },
        {
          id: 4,
          type: "四间",
          is: false,
        },
        {
          id: 5,
          type: "五间",
          is: false,
        },
        {
          id: 6,
          type: "六间",
          is: false,
        },
        {
          id: 7,
          type: "七间",
          is: false,
        },
        {
          id: 8,
          type: "八间",
          is: false,
        },
        {
          id: 9,
          type: "九间",
          is: false,
        },
      ],
      // 出发城市
      date1: "",
      date2: "",
      checked: true,
      options: [],

      optionsed: [],
      type: [],
      label: "",
      cityList: [],
      restaurants: [],
      restaurantsList: [],
      // 存储城市列表
      storageList:[]
    };
  },
  methods: {
    cityNamesaa(row) {
      console.log(row);
      if (row.parentNameCn == "") {
        row.parentNameCn = row.regionNameCn;
      }
      // 截取城市名称市之前内容
      let a = row.parentNameCn.replace(
        row.parentNameCn.substring(
          row.parentNameCn.length - 1,
          row.parentNameCn.length
        ),
        ""
      );
      // 如果包含省 就只留省 其他截掉
      let b = row.parentNameCn.replace(
        row.parentNameCn.substring(0, row.parentNameCn.length - 1),
        ""
      );

      console.log(row.parentNameCn, a, b);

      // let b=
      // 目的地
      if (b == "省") {
        let c = row.regionNameCn.replace(
          row.regionNameCn.substring(
            row.regionNameCn.length - 1,
            row.regionNameCn.length
          ),
          ""
        );
        console.log(c);
        this.formInline.provinceName = c;
        this.formInline.name = "";
      } else {
        this.formInline.provinceName = a;
      }
      if (row.parentId != "99999999" && b != "省") {
        this.formInline.name = row.regionNameCn;
      }
    },
    // 搜索目的地事件
    changeinput(e) {
      if(e==''){
        this.ctyNameList = this.storageList;
      }else{
          this.$axios
        .getHotelCity({
          cityName: e,
        })
        .then((res) => {
          if (res.code == "00000") {
            this.ctyNameList = res.data;
          }
        });

      }
    },
    //跳出
    closeLoading() {
      this.tableLoading.close();
    },
    //进入
    showLoading() {
      this.tableLoading = this.$loading({
        text: "拼命加载数据中", //显示在加载图标下方的加载文案
        spinner: "el-icon-loading", //自定义加载图标类名
        background: "rgba(0, 0, 0, 0.4)", //遮罩层颜色
        target: document.querySelector("#table"), //loadin覆盖的dom元素节点
      });
    },

    // 创建外采订单按钮
    Outsidemining() {
      this.$router.push({
        name: "Outsidemining",
      });
    },
    loadAllNum() {
      this.$axios
        .getHotelCity({
          cityName: "",
        })
        .then((res) => {
          if (res.code == "00000") {
            this.ctyNameList = res.data;
            this.storageList = res.data
            // return this.restaurants
          }
        });
    },
    // 点击新建标签页 将当前的路由传递到 tagslist数组中
    createSearch() {
      // console.log(this.$route.path);
      // bus.$emit("tags",'orderqueryss');
      window.open(
        "http://172.16.7.51:7777/#/reservation/thequery", //需要跳转的路由
        "_blank", //是否在新的页面打开
        "width=1500,height=800,toolbar=no"
      );
    },
    // 表单回车跳转下一个
    accountLogin(nextRef) {
      this.$refs[nextRef].focus();
    },
    // 出发城市
    querySearch(queryString, cb) {
      var restaurants = this.restaurants;
      var results = queryString
        ? restaurants.filter(this.createFilter(queryString))
        : restaurants;
      // 调用 callback 返回建议列表的数据
      cb(results);
    },

    createFilter(queryString) {
      return (restaurant) => {
        return (
          restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) ===
          0
        );
      };
    },
    cityChange(index) {
      console.log(index);
    },
    roomNumChange() {
      console.log(this.formInline.roomNum);
    },
    NumChange() {
      console.log(this.formInline.Num);
    },
    onSubmit(formName) {
      if (this.formInline.departureDate <= this.formInline.arrivalDate) {
        this.$message({
          message: "退房时间不能小于入住时间",
          type: "warning",
        });
        return;
      }
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let arr = {
            provinceName: this.formInline.provinceName,
            arrivalDate: this.formInline.arrivalDate,
            departureDate: this.formInline.departureDate,
            roomNum: this.formInline.roomNum,
            keyName: this.formInline.name,
            Num: this.formInline.Num,
            star: this.formInline.star,
            pageNum: 999,
            pageSize: 999,
          };
          console.log(arr);
          this.$router.push({
            name: "hotellist",
            params: {
              arr: arr,
              keywords: this.formInline.name,
              // 房间数量
              theroomnumber: this.formInline.roomNum,
              // 几人
              thenumberof: this.formInline.Num,
            },
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    cityChange(index) {
      console.log(index);
    },
  },
  mounted() {
    // this.getconditionStarRating();
    this.loadAllNum();
  },
};
</script>

<style scoped>
.citname {
  height: 200px;
  overflow-y: scroll;
}
.boxs {
  width: 650px;
  margin: 30px auto 0px;
  /* margin: 50px 0 0 173px; */
}

.head {
  padding: 30px 0 0 30px;
  margin: 50px 0 0 100px;
}

.times {
  display: flex;
}

.elform {
  margin-top: 10px;
}

.el-select {
  width: 100%;
}
</style>